<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>未来的路，一起走吧 💑</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Helvetica Neue', sans-serif;
      background: linear-gradient(to bottom, #ffeef3, #fff0f5);
      text-align: center;
      color: #444;
      overflow: hidden;
    }
    .circle {
      position: fixed;
      border-radius: 50%;
      background: radial-gradient(circle at center, rgba(255,255,255,1), rgba(255,255,255,0.3));
      animation: pulse 6s ease-in-out infinite;
      z-index: 0;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    .circle1 { width: 1000px; height: 1000px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .circle2 { width: 700px; height: 700px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at center,#ffffff,rgba(240,183,212,0.3)); }
    .circle3 { width: 600px; height: 600px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at center,#ffffff,rgba(228,184,206,0.3)); }

    .container {
      padding: 2em 1em 6em;
      position: relative;
      z-index: 1;
    }
    .title {
      font-size: 24px;
      color: #e91e63;
      margin-bottom: 1em;
    }
    .image-box img {
  max-width: 80%;
  max-height: 60vh;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    
    .buttons {
      margin-top: 2em;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1em;
    }
    .buttons button {
      padding: 0.7em 1.5em;
      font-size: 16px;
      border: none;
      border-radius: 24px;
      background-color: #e91e63;
      color: white;
      cursor: pointer;
      transition: 0.3s;
    }
    .buttons button:hover {
      background-color: #d81b60;
    }
    .footer-message {
      margin-top: 4em;
      font-size: 16px;
      color: #888;
      opacity: 0;
      animation: fadeIn 3s ease forwards;
    }
    @keyframes fadeIn {
      to { opacity: 1; }
    }
    audio {
      margin-top: 2em;
    }
    .firework, .meteor {
      position: absolute;
      background-color: white;
      border-radius: 50%;
      opacity: 0;
      animation: pop 1s ease-out forwards;
    }
    @keyframes pop {
      0% { transform: scale(0); opacity: 1; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    .meteor {
      width: 2px;
      height: 80px;
      background: linear-gradient(to bottom, white, transparent);
      opacity: 0.8;
      animation: fall 2s linear infinite;
    }
    @keyframes fall {
      0% {
        transform: translate(100vw, -20vh) rotate(45deg);
        opacity: 1;
      }
      100% {
        transform: translate(-10vw, 100vh) rotate(45deg);
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div class="circle circle1"></div>
  <div class="circle circle2"></div>
  <div class="circle circle3"></div>

  <div class="container">
    <div class="title">未来的路，一起走吧 💑</div>
    <div class="image-box">
      <img src="../public/handinhand.jpg" alt="手牵手" />
    </div>
    
    <div class="buttons">
      <button onclick="window.location.href='index.html'">再看一次</button>
      <button onclick="makeWish()">偷偷许个愿 ✨</button>
    </div>
    <div class="footer-message">
      谢谢你看到这里，也谢谢你愿意和我一起走到未来。
    </div>
  </div>

  <script>
    function makeWish() {
      const wish = prompt("在心里偷偷许个愿吧 💫\n（或者写下来，给未来的我们）");
      if (wish) {
        alert("愿望收到啦~ 它正在悄悄变成现实 ✨\n你的小心愿是：" + wish);
      }
    }

    setInterval(() => {
      const firework = document.createElement("div");
      firework.classList.add("firework");
      const size = Math.random() * 20 + 10;
      firework.style.width = firework.style.height = size + "px";
      firework.style.left = Math.random() * 100 + "vw";
      firework.style.top = Math.random() * 60 + "vh";
      firework.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 80%)`;
      document.body.appendChild(firework);
      setTimeout(() => firework.remove(), 1000);
    }, 800);

    setInterval(() => {
      const meteor = document.createElement("div");
      meteor.classList.add("meteor");
      meteor.style.left = Math.random() * 100 + "vw";
      meteor.style.top = Math.random() * -20 + "vh";
      document.body.appendChild(meteor);
      setTimeout(() => meteor.remove(), 2000);
    }, 4000);
  </script>
</body>
</html>
